<template>
  <view class="feature-menu">
    <view class="header-bar">
      <view class="left">
        <image class="image" src="/static/icons/ydyq.png" mode="aspectFit"></image>
      </view>
      <view class="right flex align-center">
        <text> {{dayjs().format("MM月DD日")}}</text>
        <text class="padding-lr"> {{getDayOfWeek()}}</text>
        <text> {{curTime}}</text>
        <!-- {{dayjs().format("MM月DD日")}} -->
        <view class="margin-left-lg right-icon">
          <image class="top-icon " src="/static/icons/dyj.png" mode="aspectFit"></image>
          <image class="top-icon" src="/static/icons/wd.png" mode="aspectFit"></image>
        </view>
      </view>
    </view>
    <view class="title-bar">
      <view class="main-title">
        一体机零售版
      </view>
      <view class="store-name">
        商户名：xxx
      </view>
    </view>
    <view class="menu-grid-box">
      <view class="menu-grid">
        <view class="menu-item" v-for="item in menus" @click="toPages(item.target)">
          <image class="menu-icon" :src="item.image" mode="aspectFit" v-if="item.image"></image>
          <view class="menu-icon" v-else>
            <text :class="'cuIcon-'+item.icon"></text>
          </view>
          <view class="menu-name margin-top">
            {{item.name}}
          </view>
        </view>
      </view>
    </view>
    <view class="bottom-bar">
      <button class="cu-btn  margin-right-lg">客服中心</button>
      <text>7*14小时（09:00-23:00）</text>
      <text>热线：400-102-6888</text>
    </view>
  </view>
</template>

<script>
  const dayjs = require('dayjs')

  let timer = null
  let curTime = dayjs().format("HH:mm:ss")
  export default {
    data() {
      return {
        dayjs: dayjs,
        curTime: curTime,
        menus: [{
            name: "收银",
            icon: "newshot",
            image: "/static/icons/sy.png",
            target: "/pages/main/cash/cash"
          },
          {
            name: "销售管理",
            image: "/static/icons/xsgl.png",
            icon: "newshot"
          },
          {
            name: "商品管理",
            image: "/static/icons/spgl.png",
            icon: "newshot",
            target: "/pages/main/goodsManage/goodsManage"
          },
          {
            name: "库存管理",
            image: "/static/icons/kcgl.png",
            icon: "newshot"
          },
          {
            name: "报表管理",
            image: "/static/icons/bbgl.png",
            icon: "newshot"
          },
          {
            name: "营销管理",
            image: "/static/icons/yxgl.png",
            icon: "newshot"
          },
          {
            name: "会员管理",
            image: "/static/icons/hygl.png",
            icon: "newshot",
            target: "/pages/public/list/list"
          },
          {
            name: "设置",
            image: "/static/icons/sz.png",
            icon: "newshot"
          },

        ]
      }
    },
    onLoad() {
      // #ifdef APP
      // plus.navigator.hideSystemNavigation() //隐藏虚拟按键
      // #endif
    },
    mounted() {
      timer = setInterval(() => {
        this.curTime = dayjs().format("HH:mm:ss")
      }, 1000)
    },
    methods: {
      toPages(target) {
        if (target) {
          uni.navigateTo({
            url: target
          })
        }
      },
    },
    beforeDestroy() {
      clearInterval(timer)
    }
  }
</script>

<style lang="scss" scoped>
  .feature-menu {
    background-color: $retail-color-primary;
    width: 100%;
    height: 100vh;
    color: #fff;
    padding: 45px;
    font-size: 18px;
    display: flex;
    flex-direction: column;
  }

  .header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    vertical-algin: bottom;
    font-size: $retail-font-size-base;

    .left {
      .image {
        width: 250px;
        height: 75px;
      }
    }

    .right {
      line-height: 100%;

      .top-icon {
        width: 45px;
        height: 45px;
        margin-left: 55px;
        font-size: $retail-font-size-base;
      }
    }
  }

  .title-bar {
    padding: 0 120px;
    margin-top: 35px;

    .main-title {
      font-size: $retail-font-size-2xl;
    }

    .store-name {
      font-size: $retail-font-size-base;
    }
  }

  .menu-grid-box {
    width: 100%;
    flex: 1;
    display: flex;
    align-items: flex-start;
  }

  .menu-grid {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    .menu-item {
      width: 25%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 28px;
      flex-direction: column;
      font-size: 20px;

      .menu-icon {
        font-size: 80px;
        width: 20rem;
        height: 20rem;
        line-height: 20rem;
        text-align: center;
      }

      .menu-name {
        font-size: $retail-font-size-lg;
      }
    }
  }

  .bottom-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: $retail-font-size-base;

    .cu-btn {
      width: 160px;
      height: 60px;
      border: 1px solid #fff;
      color: #fff;
      background-color: $retail-color-primary;
      font-size: $retail-font-size-sm;
      margin-right: 45px;
    }
  }
</style>
